<template>
	<view class="feedback-container">
		<h1>意见反馈</h1>
		
		<textarea 
			class="feedback-input" 
			placeholder="在这里输入您的反馈..."
			v-model="feedbackText"
		></textarea>
		
		<view class="rating-section">
			<text class="rating-label">评分：</text>
			<van-rate
				:value="rating"
				@change="onRateChange"
				:size="25"
				color="#ffd21e"
				void-icon="star"
				void-color="#eee"
			/>
		</view>
		
		<button class="submit-btn" @click="submitFeedback">提交反馈</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				feedbackText: '',
				rating: 0 // Initialize with 0 to ensure it's a number
			}
		},
		methods: {
			onRateChange(event) {
				// For WeChat mini-program, the value comes in event.detail
				this.rating = event.detail;
			},
			submitFeedback() {
				if (!this.feedbackText) {
					uni.showToast({
						title: '请填写反馈内容',
						icon: 'none'
					});
					return;
				}
				
				console.log('Feedback submitted:', {
					text: this.feedbackText,
					rating: this.rating
				});
				
				uni.showToast({
					title: '反馈提交成功',
					icon: 'success'
				});
				
				this.feedbackText = '';
				this.rating = 0;
			}
		}
	}
</script>

<style>
	/* Keep the same styles as before */
	.feedback-container {
		padding: 20px 80rpx;
	}
	
	h1 {
		font-size: 20px;
		margin-bottom: 20px;
		text-align: center;
	}
	
	.feedback-input {
		width: 100%;
		height: 200px;
		padding:20rpx;
		box-sizing: border-box;
		border: 1px solid #eee;
		border-radius: 4px;
		margin-bottom: 20px;
		font-size: 14px;
	}
	
	.rating-section {
		display: flex;
		align-items: center;
		margin-bottom: 30px;
	}
	
	.rating-label {
		margin-right: 10px;
		font-size: 16px;
	}
	
	.submit-btn {
		background-color: #07c160;
		color: white;
		border: none;
		border-radius: 4px;
		padding: 10px 0;
		/* width: 100%; */
		font-size: 16px;
		width: 250rpx;
	}
	
	.submit-btn:active {
		background-color: #06ad56;
	}
</style>